<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>1.localStorage</title>
    <style>
      * {
        font-size: 30px;
      }
    </style>
  </head>
  <body>
    <h1>练习使用localStorage</h1>
    <button onclick="test1()">点我存入数据到localStorage中1</button> <br><br>
    <button onclick="test2()">点我读取localStorage中的数据</button> <br><br>
    <button onclick="test3()">点我从localStorage中删除指定数据</button> <br><br>
    <button onclick="test4()">点我清空localStorage中的数据</button> <br><br>

    <script type="text/javascript" >
      
      function test1(){
        // 存入的形式是：key-value的形式
        // setItem传递两个参数，第一个是key，第二个是value
        // 无论key还是value均是字符串，如果传递的不是字符串，底层会强制调用toString()
        let person = {name:'张三',age:18}
        localStorage.setItem('person',JSON.stringify(person))
      }

      function test2(){
        let x = localStorage.getItem('person')
        console.log(JSON.parse(x))
      }

      function test3(){
        localStorage.removeItem('person')
      }

      function test4(){
        localStorage.clear()
      }

      // let dog = {name:'旺财',age:4}
      // let str = JSON.stringify(dog)
      // console.log(str)

    </script>
  </body>
</html>